<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form
          ref="formList"
          :model="formList"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <el-form-item label="Logo" prop="app_home_page_logo">
            <el-upload
              class="logo"
              ref="upload"
              :action="baseUrl +'/api/localStorage/pictures'"
              :headers="authHeader"
              list-type="picture-card"
              :on-success="handleImgUploadSuccess"
              :on-remove="handleRemove"
              :show-file-list="false"
            >
              <img
                v-if="formList.app_home_page_logo "
                :src="baseUrl+formList.app_home_page_logo"
                width="100%"
                height="100%"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <!-- <el-input v-model="formList.app_home_page_logo" style="width: 80%"></el-input> -->
          </el-form-item>
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="formList.mobile" style="width: 80%" />
          </el-form-item>
          <el-form-item label="邮编" prop="postcode">
            <el-input v-model="formList.postcode" style="width: 80%" />
          </el-form-item>
          <el-form-item label="传真" prop="fax">
            <el-input v-model="formList.fax" style="width: 80%" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="formList.address" style="width: 80%" />
          </el-form-item>
          <el-form-item label="备案号" prop="bei_an_hao">
            <el-input v-model="formList.bei_an_hao" style="width: 80%" />
          </el-form-item>
          <el-form-item label="版权信息" prop="version_info">
            <el-input v-model="formList.version_info" style="width: 80%" />
          </el-form-item>
          <el-form-item label="微信公众号" prop="wechat_gong_zhong_hao">
            <el-upload
              ref="upload"
              :action="baseUrl +'/api/localStorage/pictures'"
              :headers="authHeader"
              list-type="picture-card"
              :on-success="wechatHandleImgUploadSuccess"
              :on-remove="wechatHandleRemove"
              :show-file-list="false"
            >
              <img
                v-if="formList.wechat_gong_zhong_hao"
                :src="baseUrl+formList.wechat_gong_zhong_hao"
                width="100%"
                height="100%"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <!-- <el-input v-model="formList.wechat_gong_zhong_hao" style="width: 80%"></el-input> -->
          </el-form-item>
          <!-- <el-form-item label="一体机模式" prop="single_device">
            <el-switch
              v-model="formList.single_device"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#dddfe5">
            </el-switch>
          </el-form-item> -->
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="onSubmit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// import crudAnnouncement from "@/api/announcement";
import crudAnnouncement from "@/api/storehousrConfig";
import {getConfigInfo, editAll} from "@/api/storehousrConfig";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import { upload } from "@/utils/upload";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
export default {
  name: "AnnouncementContact",
  data() {
    return {
      app_home_page_logo: "",
      wechat_gong_zhong_hao:'',
      url: "",
      fileList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      permission: {
        add: ["admin", "announcement:add"],
        edit: ["admin", "announcement:edit"],
        del: ["admin", "announcement:del"]
      },
      rules: {
        app_home_page_logo:[{required: true, message: "图片不能为空", trigger: "blur"}],
        mobile: [
          { required: true, trigger: "blur" , validator:this.validatePhone}
        ],
        postcode: [
          { required: true, trigger: "blur" ,validator:this.validatePostcode}
        ],
        fax: [
          { required: true, trigger: "blur" , validator:this.validateFax}
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        version_info:[{required: true, message: "版权信息不能为空", trigger: "blur"}],
        bei_an_hao: [{ required: true, message: "备案号不能为空", trigger: "blur" }],
        wechat_gong_zhong_hao:[{required: true, message: "图片不能为空", trigger: "blur"}],
      },
      formList:{
      },
    };
  },
  computed: {
    ...mapGetters(["baseApi"]),
    authHeader() {
      return { Authorization: getToken() };
    }
  },
  created(){
    this.getConfig()
  },
  methods: {
    onSubmit() {
      editAll(this.formList).then(res=>{
        this.$message({
          message:'信息提交成功！',
          type: 'success'
        });
        this.$store.commit('login/setIsShowHome', this.formList.single_device)
        location.reload()
      })
    },
    getConfig(){
      getConfigInfo().then(res => {
        console.log(res);
        this.formList=res
  	})
    },
    validatePhone(rule, value, callback) {
      if (value == null) {
        callback(new Error('电话不可为空'));
      } else {
        var reg = /^[0-9-]*$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的电话号码'));
          return;
        }
        callback();
        }
    },
    validateFax(rule, value, callback) {
      if (value == null) {
        callback(new Error('传真不能为空'));
      } else {
        var reg = /^[0-9-]*$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的传真'));
          return;
        }
        callback();
        }
    },
    validatePostcode(rule, value, callback) {
      if (value == null) {
        callback(new Error('邮编不能为空'));
      } else {
        var reg = /^[0-9]*$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的邮编'));
          return;
        }
        callback();
        }
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handleImgUploadSuccess(response, file) {
      {
        // console.log(response,file)
        this.formList.app_home_page_logo =response.path
        this.app_home_page_logo = URL.createObjectURL(file.raw);
        // console.log(this.app_home_page_logo)
      }
    },
    wechatHandleImgUploadSuccess(response, file){
      this.formList.wechat_gong_zhong_hao =response.path
      this.wechat_gong_zhong_hao = URL.createObjectURL(file.raw);
    },
    wechatHandleRemove(file, fileList){

    }
  }
}
</script>

<style scoped lang="scss">
.head-container ::v-deep{
  // width: 50%;
  // height: 60%;
  // margin: auto;
  // box-shadow: 0 10px 20px 1px rgba(49, 49, 49, 0.2);
  .dialog-footer{
    display: flex;
    justify-content: space-around;
    margin-top: 40px;

  }
  .logo {
    .el-upload--picture-card {
      width: 328px;
      height: 90px;
    }
  }
  .el-upload--picture-card {
    margin-bottom: 10px;
  }
}
</style>

